{% extends 'base.html' %}

{% block content %}
    <div class="page-wrapper">
        <div class="page-inner">
            <div class="chart-wrapper">
                <canvas id="myChart"></canvas>
            </div>

            <table border="1" cellpadding="7">
                <tr>
                    <td>Аккаунты со статусом <b>ОК</b>, <b>Товар продан</b></td>
                    <td>Аккаунты в <b>бане</b></td>
                    <td class="total-amount">
                        <p style="display: inline;">Общая сумма</p>
                    </td>
                </tr>
                <tr>
                    <td>{{ good_accounts_count }}</td>
                    <td>{{ bad_accounts_count }}</td>
                    <td class="total-amount-value">{{ amount }}$</td>
                </tr>
            </table>

            <div class="time-interval">
                <p>Начальный день:</p>
                <input type="date" class="starting-day">
                <p>Конечный день:</p>
                <input type="date" class="end-day">
                <button class="select-time-interval" onclick="changeAmount();">Применить</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        base.showGraph()
    </script>


{% endblock content %}